<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/WEB-INF/templates/template.xhtml">
	
<ui:define name="headIncludes">
	<style>
		.ui-datalist .ui-datalist-header, .ui-datalist .ui-datalist-footer {
			text-align:left;
		}
		
		.panel100{
			width:100px;
		}
		
		.panel220 {
			width: 220px;
		}
		
		.panel150 {
			width: 150px;
		}
		
		.panelInfos {
			width:645px;
			height:65px;
		}
		
		.classBold {
			font-weight: bold;
		}
	</style>
	<f:event listener="#{produtoBean.initializeForm(param.produtoId)}" type="preRenderView"/>
</ui:define>
	
	<ui:define name="pageName">
		Detalhe de Produto		
	</ui:define>
	<ui:define name="buttons">
		<p:commandButton value="Editar" style="height:28px;" action="#{produtoBean.changeToEdit}" icon="ui-icon-pencil"/>
		<p:commandButton value="Excluir" style="height:28px;" onclick="popupConfirmDeleteDetail.show()" icon="ui-icon-trash"/>
		<p:commandButton value="Voltar" style="height:28px;" action="#{produtoBean.changeToList}" process="@this" icon="ui-icon-arrowreturnthick-1-w"/>
	</ui:define>
	
	<ui:define name="content">	
		<p:panel>
			<div>
				<p:messages id="messageFromProduto" autoUpdate="true" closable="true"/>
				
				<h:panelGrid columns="3" style="padding:5px;" columnClasses="panel100, panel220">
					<h:outputText styleClass="classBold" value="Código" />
					<h:outputText styleClass="classBold" value="Grupo" />	
					<h:outputText styleClass="classBold" value="Descrição" />
						
					<h:outputText value="#{produtoBean.currentProduto.id}"/>
					<h:outputText value="#{produtoBean.currentProduto.grupo.grupo}"/>
					<h:outputText value="#{produtoBean.currentProduto.descricao}"/>					
				</h:panelGrid>
				
				<h:panelGrid columns="3" style="padding:5px;" columnClasses="panel100, panel220">
					<h:outputText styleClass="classBold" value="Unidade" />
					<h:outputText styleClass="classBold" value="Marca" />								
					<h:outputText styleClass="classBold" value="Código de barras" />
							
					<h:outputText value="#{produtoBean.currentProduto.unidade}"/>
					<h:outputText value="#{produtoBean.currentProduto.marca}"/>
					<h:outputText value="#{produtoBean.currentProduto.codigoBarras}"/>	
				</h:panelGrid>				
													
				<h:panelGrid columns="4" style="padding:5px;" columnClasses="panel150,panel150,panel150">			
					<h:outputText styleClass="classBold" value="Valor de custo" />		
					<h:outputText styleClass="classBold" value="Valor de venda" />	
					<h:outputText styleClass="classBold" value="Estoque mínimo" />	
					<h:outputText styleClass="classBold" value="Estoque atual" />	
				
					<h:outputText value="#{produtoBean.currentProduto.valorCusto}">
						<f:convertNumber pattern="R$ #,###,##0.00" />
					</h:outputText>
					<h:outputText value="#{produtoBean.currentProduto.valorVenda}">
						<f:convertNumber pattern="R$ #,###,##0.00" />
					</h:outputText>
					<h:outputText value="#{produtoBean.currentProduto.estoqueMinimo}"/>
					<h:outputText value="#{produtoBean.currentProduto.estoqueAtual}"/>
				</h:panelGrid>
				
				<h:panelGrid columns="1">
					<h:outputText styleClass="classBold" value="Informações técnicas" />	
					<h:outputText value="#{produtoBean.currentProduto.infosTecnicas}"/>	
				</h:panelGrid>
				
				<h:panelGrid columns="1">
					<h:outputText styleClass="classBold" value="Restrições" />						
					<h:outputText value="#{produtoBean.currentProduto.restricoes}"/>	
				</h:panelGrid>

				<div style="padding-top:10px;">
					<p:dataTable var="fornecedor" 
						value="#{produtoBean.currentFornecedores}" rendered="#{produtoBean.currentProduto.fornecedores.size() > 0}"
						paginator="true" rows="10" paginatorPosition="bottom"
						emptyMessage="Não há registros" id="tableFornecedores">  
						<p:column headerText="Código" style="width:150px;">  
					    	<h:outputText value="#{fornecedor.id}" />  
						</p:column>  
					 
						<p:column headerText="Nome">  
					    	<h:outputText value="#{fornecedor.nome}" />  
						</p:column> 	
				  	</p:dataTable>
				</div>
			</div>
		</p:panel>	
	</ui:define>	
	<ui:define name="popups">
		<ui:include src="listGrupo.xhtml"/>
		<ui:include src="listFornecedor.xhtml"/>
		
		<p:dialog appendToBody="true" modal="true" closable="false" widgetVar="popupConfirmDeleteDetail"
			width="300" resizable="false" header="Confirmação de exclusão" height="90">
			<h:form>
				<div style="margin-top: 10px;">
					<h:outputText value="Confirma a exclusão do registro?"/>
				</div>
				<div align="right" style="margin-top: 15px; margin-bottom: 15px;">
					<p:commandButton value="Excluir" actionListener="#{produtoBean.removeFromDetail}" oncomplete="popupConfirmDeleteDetail.hide()" icon="ui-icon-trash"/>
					<p:commandButton value="Cancelar" onclick="popupConfirmDeleteDetail.hide()" icon="ui-icon-cancel"/>
				</div>		
			</h:form>			
		</p:dialog>
		
		<p:dialog id="completeDialogDelete" header="Confirmação de exclusão" closable="false"
			widgetVar="completeDeletePopup" width="300" resizable="false">
			<h:form>
			<div style="margin-top: 10px;">Excluído com sucesso!</div>
			
			<div align="right" style="margin-top: 15px; margin-bottom: 15px;" > 
				<p:commandButton id="complete" value="Fechar" oncomplete="completeDeletePopup.hide()" icon="ui-icon-close" 
					action="#{produtoBean.changeToList}" />
			</div>
			</h:form>
		</p:dialog>
	</ui:define>
</ui:composition>